<template>
  <div class="index">
    <div class="forms">
      <span :class="selected==='yesterday'?'selected':''" @click="dateFiltering('yesterday')">近3天 </span>
      <span :class="selected==='lastSevenDays'?'selected':''" @click="dateFiltering('lastSevenDays')"> 近7天 </span>
      <span :class="selected==='lastThirtyDays'?'selected':''" @click="dateFiltering('lastThirtyDays')"> 近30天 </span>
      <el-date-picker v-model="customDate" type="daterange" @change="changeDate"></el-date-picker>
    </div>

    <div class="cards">
      <div class="box-card">
        <el-card>
          <h3 class="text"> 用户数 </h3>
          <!-- <p>{{params.startTime}} ~ {{params.endTime}}</p>
          <p>抽样基准：--% <i class="el-icon-question" size="12"></i></p> -->
          <h3>用户数(A)</h3>
          <h1>{{statistics.purchaserSum}}<span>人</span></h1>
          <!-- <p>环比<span>-57.05%</span></p> -->
        </el-card>
      </div>

      <div class="box-card">
        <el-card>
          <h3 class="text"> 新用户数 </h3>
          <p>{{params.startTime}} ~ {{params.endTime}}</p>
          <!-- <p>抽样基准：--% <i class="el-icon-question" size="12"></i></p> -->
          <h3>用户数(A)</h3>
          <h1>{{statistics.newPurchaserSum}}<span>人</span></h1>
          <!-- <p>环比<span>-57.05%</span></p> -->
        </el-card>
      </div>

      <div class="box-card" @click="jumpDetails('登录客户数')">
        <el-card>
          <h3 class="text"> 下单用户数 </h3>
          <p>{{params.startTime}} ~ {{params.endTime}}</p>
          <!-- <p>抽样基准：--% <i class="el-icon-question" size="12"></i></p> -->
          <h3>用户数(A)</h3>
          <h1>{{statistics.orderedPurchaserSum}}<span>人</span></h1>
          <!-- <p>环比<span>-57.05%</span></p> -->
        </el-card>
      </div>

    </div>

    <div class="table">
      <el-card class="box-card">
        <div id="user" style="width:100%;height:300px;"></div>
      </el-card>
      <el-card class="box-card">
        <div id="access" style="width:100%;height:300px;"></div>
      </el-card>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { loginTrends, perCapitaVisits, getOrderedPurchaserSum } from "@/api/statisticsAdmin/purchaserLogin"
import { purchaserSum, purchaserNewSum } from "@/api/statisticsAdmin/purchaser"

export default {
  data () {
    return {
      selected: 'lastSevenDays',
      customDate: [],
      params: {
        startTime: '',
        endTime: '',
        dimension: 'DAY',
      },
      statistics: {
        purchaserSum: 0,
        newPurchaserSum: 0,
        orderedPurchaserSum: 0,
      },
    }
  },
  created () {
    this.dateFiltering('lastSevenDays')
  },
  methods: {
    jumpDetails (e) {
      let date = this.params.startTime + "~" + this.params.endTime
      this.$router.push("/statisticsAdmin/loginStatistics/purchaserLoginList/" + date)
    },
    changeDate () {
      this.design(this.customDate[0], this.customDate[1])
    },
    dateFiltering (e) {
      this.selected = e
      let startTime = new Date()
      let endTime = new Date()
      if (e === 'today') {
        endTime.setDate(endTime.getDate())
        startTime.setDate(startTime.getDate())
      }
      if (e === 'yesterday') {
        endTime.setDate(endTime.getDate() - 1)
        startTime.setDate(startTime.getDate() - 1)
      }
      if (e === 'lastSevenDays') {
        endTime.setDate(endTime.getDate())
        startTime.setDate(startTime.getDate() - 6)
      }
      if (e === 'lastThirtyDays') {
        endTime.setDate(endTime.getDate())
        startTime.setDate(startTime.getDate() - 30)
      }

      this.design(startTime, endTime)
    },
    design(startTime, endTime){
      this.params.startTime = this.parseTime(startTime, '{y}-{m}-{d}')
      this.params.endTime = this.parseTime(endTime, '{y}-{m}-{d}')

      //客户总数
      purchaserSum(this.params).then(res=>{
        if (res.code === 200) {
          this.statistics.purchaserSum = res.data
        }
      })
      //新客户总数
      purchaserNewSum(this.params).then(res=>{
        if (res.code === 200) {
          this.statistics.newPurchaserSum = res.data
        }
      })
      //获取下单客户总数
      getOrderedPurchaserSum({startDate: this.params.startTime, endDate: this.params.endTime}).then(res=>{
        if (res.code === 200) {
          this.statistics.orderedPurchaserSum = res.data
        }
      })
      //登录人次
      loginTrends(this.params).then(res => {
        if (res.code === 200) { this.getData(res.data.items, 'user', "登录人数") }
      })
      //登录人均次数
      perCapitaVisits(this.params).then(res => {
        if (res.code === 200) { this.getData(res.data.items, 'access', "登录人均次数") }
      })
    },
    getData (data, elementId, title) {
      let x = []
      let yData = []
      data.forEach(i => {
        x.push(i.name)
        yData.push({value: i.value})
      })
      let y = [{type: 'line', data: yData }]
      echarts.init(document.getElementById(elementId)).setOption(this.setData(x, y, title))
    },
    setData (x, y, title) {
      return {
        title: {text: title},
        tooltip: { trigger: 'axis' },
        xAxis: { data: x },
        yAxis: { type: 'value' },
        grid: {
          left: "8%",
          right: "5%",
          bottom: "20%",
        },
        series: [...y]
      }
    },
  }
}
</script>

<style  lang="scss" scoped>
.index {
  font-size: 14px;
  padding: 20px;
  .forms {
    display: flex;
    margin-bottom: 20px;
    span {
      font-size: 14px;
      padding: 4px 10px;
      border: 1px solid #dcdfe6;
    }
    span:hover {
      cursor: pointer;
    }
    .selected {
      border: 1px solid blue;
    }
    ::v-deep .el-range-editor {
      margin-left: 20px;
      width: 230px;
      height: 30px;
      padding: 0 10px;
      display: flex;
      align-items: center;
    }
  }
  ::v-deep .el-icon-question {
    color: rgb(164, 164, 218);
  }
  .cards {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    .box-card {
      min-width: calc(25% - 15px);
      margin-right: 15px;
      margin-bottom: 20px;
      h3:first-child {
        font-weight: 550;
        margin: 0 0 10px;
      }
      h1 {
        font-size: 40px;
        margin: 0 0 10px;
        overflow: hidden;
        line-height: 1;
        span {
          font-size: 18px;
        }
      }
      p {
        margin: 0;
        color: cadetblue;
        span {
          margin-left: 20px;
        }
      }
    }
  }
  .table {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    .box-card {
      width: calc(50% - 15px);
      margin-right: 15px;
      margin-bottom: 20px;
      ::v-deep .el-card__body {
        padding: 0;
      }
    }
  }
}
</style>
